$(document).ready(function(){
    /**
    * move hover 
    */
    $('.top-menu li.main-item').unbind('mouseover');
    $('.top-menu li.main-item').mouseover(function(){
        showMenu($(this));
    });
    
    $('.top-menu li.main-item').mouseout(function(){
          
    });
});

function showMenu(obj){
      var menu = $(obj).attr("menuId");
      var child = $('#' + menu);
    var topMain =  obj.position().top;
    var leftMain =    obj.position().left;
    $(child).css('top', topMain + $(obj).height());
    $(child).css('left', leftMain);
    $(child).slideDown('fast', function(){
        sliceUpMenu(obj, child);    
        obj.addClass('active');
        $('.top-menu li.main-item').unbind('mouseover');
    });
    
    
      
}

/**
* check slice up menu
* @author tien.ngyen
*/
function sliceUpMenu(main, child){    
    $(document).mousemove(function(e){
        var topMain =  main.position().top;
        var leftMain =    main.position().left  - 27 ;
        var widthMain = $(main).width() + 54;
        var heightMain = $(main).height() + 10;
        
        if(child.position() != null){
            var topChild =  child.position().top;
            var leftChild =    child.position().left;
            var widthChild = $(child).width();
            var heightChild = $(child).height();
            
            var x = e.pageX;
            var y = e.pageY;
            //alert(x+','+y+',' + leftMain +',' + (widthMain + leftMain) +','+topMain+','+ (heightMain + topMain));
            if( (x < leftMain || x > (leftMain + widthMain) ||
                y < topMain || y > (topMain + heightMain))
                 &&
                (x < leftChild || x > (leftChild + widthChild) ||
                y < topChild || y > (topChild + heightChild ))){
                    $(child).slideUp('fast', function(){
                        $(document).unbind('mousemove');
                        main.removeClass('active');
                    
                        $('.top-menu li.main-item').unbind('mouseover');
                        $('.top-menu li.main-item').mouseover(function(){
                            $(this).unbind('mouseover');
                            showMenu($(this));
                        });    
                    });        
                }    
        }else{
            $(document).unbind('mousemove');
        }
    });
}